<template>
  <div>
    <div class="wrapper">
      <nav
        class="nav"
        :class="{ is_fixed: isFixed }"
        :style="isFixed == false ? 'background:transparent' : 'background:#fff'"
      >
        <ul>
          <li>
            <a :style="isFixed == false ? 'color:#fff' : 'color:#000'" href="#"
              >概述</a
            >
          </li>
          <li>
            <a :style="isFixed == false ? 'color:#fff' : 'color:#000'" href="#"
              >电气化概念车LF-Z</a
            >
          </li>
          <li>
            <a :style="isFixed == false ? 'color:#fff' : 'color:#000'" href="#"
              >发展历史</a
            >
          </li>
          <li>
            <a :style="isFixed == false ? 'color:#fff' : 'color:#000'" href="#"
              >精彩视频</a
            >
          </li>
          <li>
            <a :style="isFixed == false ? 'color:#fff' : 'color:#000'" href="#"
              >常见问题</a
            >
          </li>
          <li>
            <a :style="isFixed == false ? 'color:#fff' : 'color:#000'" href="#"
              >预约试驾智·混动车型</a
            >
          </li>
        </ul>
      </nav>
      <div class="banner" id="boxFixed">
        <el-carousel :interval="5000" arrow="always" loop height="978px">
          <el-carousel-item>
            <img src="@/assets/images/dianqi/dianqi_100000033.jpg" alt="" />
          </el-carousel-item>
          <el-carousel-item>
            <img src="@/assets/images/dianqi/dianqi_100001916.jpg" alt="" />
          </el-carousel-item>
          <el-carousel-item>
            <img src="@/assets/images/dianqi/dianqi_100001917.jpg" alt="" />
          </el-carousel-item>
          <el-carousel-item>
            <img src="@/assets/images/dianqi/dianqi_100001918.jpg" alt="" />
          </el-carousel-item>
          <el-carousel-item>
            <img src="@/assets/images/dianqi/dianqi_100001919.jpg" alt="" />
          </el-carousel-item>
        </el-carousel>
      </div>

      <div class="banner1">
        <el-carousel :interval="4000" arrow="always" loop height="978px">
          <el-carousel-item>
            <img src="@/assets/images/dianqi/dianqi_100000066.jpg" alt="" />
          </el-carousel-item>
          <el-carousel-item>
            <img src="@/assets/images/dianqi/dianqi_100000067.jpg" alt="" />
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="zucheng">
        <div class="title"><h3>组成部分</h3></div>
        <div class="text-content">
          <ul>
            <li>
              &emsp;&emsp;油电混合动力分为“强混”、“中混"和“经混”三种，雷克萨斯全混动科技属于“强混”，配备能星控制单元(PCU)、阿特金森发动机、电子无级变速器和镍氢电池组。相较于“中混”与“轻混”系统，雷克萨斯全混动科技独有的混联结构，使发动机和电动机既可以单独运行，更可以高效合作，一同为车辆提供强劲动力。
            </li>
            <li>
              &emsp;&emsp;混动技术如果按排列方式来分，有“串联”，“并联"”和“混联”三种形式。雷克萨斯全混动科技采用混联的形式，并有效结合了'串联"和并联"两者的优点，具备出色的节能代势而且电池无需外接充电，为消费者带来上佳的驾乘体验。
            </li>
            <li>
              &emsp;&emsp;雷克萨斯全混动科技可支持前驱、后驱、四驱等所有驱动系统，并覆盖紧凑型轿车至中大型SUV等多款车型，让消费者有多种选择，从而带来不凡体验。
            </li>
          </ul>
        </div>
        <div class="car-pic">
          <img src="@/assets/images/dianqi/dianqi_100001909.jpg" alt="" />
          <div
            class="cir1"
            @click="
              zuchengindex = 1;
              maskisshow = true;
            "
          >
            <span :class="zuchengindex == 1 ? 'active' : ''"></span>
          </div>
          <div
            class="cir2"
            @click="
              zuchengindex = 2;
              maskisshow = true;
            "
          >
            <span :class="zuchengindex == 2 ? 'active' : ''"></span>
          </div>
          <div
            class="cir3"
            @click="
              zuchengindex = 3;
              maskisshow = true;
            "
          >
            <span :class="zuchengindex == 3 ? 'active' : ''"></span>
          </div>
          <div
            class="cir4"
            @click="
              zuchengindex = 4;
              maskisshow = true;
            "
          >
            <span :class="zuchengindex == 4 ? 'active' : ''"></span>
          </div>
          <div class="mask" v-if="maskisshow">
            <div class="btn1">
              <button @click="maskisshow = false">x</button>
            </div>
            <div class="banner2">
              <el-carousel
                :autoplay="false"
                arrow="always"
                height="590px"
                :initial-index="zuchengindex - 1"
              >
                <el-carousel-item>
                  <div>
                    <img
                      src="@/assets/images/dianqi/dianqi_100001905.jpg"
                      alt=""
                    />
                  </div>
                  <div class="txt">
                    <p>
                      此雷克萨斯智·混动部件仅供参考，具体部件样式请以实车为准。
                    </p>
                    <h2>镍氢电池组</h2>
                    <p>理电池无法企及的高效与环保</p>
                    <p>
                      可在零下40°C至零上80°C的极端温度下正常工作，具有瞬间功率输出大，电流更大的优势，电池组本身能够被回收利用，更加绿色环保。
                    </p>
                  </div>
                </el-carousel-item>
                <el-carousel-item>
                  <div>
                    <img
                      src="@/assets/images/dianqi/dianqi_100001903.jpg"
                      alt=""
                    />
                  </div>
                  <div class="txt">
                    <p>
                      此雷克萨斯智·混动部件仅供参考，具体部件样式请以实车为准。
                    </p>
                    <h2>能量控制单元 (PCU)</h2>
                    <p>雷克萨斯智·混动独有的智能大脑</p>
                    <p>
                      高效智能控制着发电机的直交流电转换，确保雷克萨斯全混动科技系统稳定运行，实时计算着极具效率的两种动力的结合方式，有效地提高车辆燃油经济性。
                    </p>
                  </div>
                </el-carousel-item>
                <el-carousel-item>
                  <div>
                    <img
                      src="@/assets/images/dianqi/dianqi_100001904.jpg"
                      alt=""
                    />
                  </div>
                  <div class="txt">
                    <p>
                      此雷克萨斯智·混动部件仅供参考，具体部件样式请以实车为准。
                    </p>
                    <h2>电子无级变速系统（ECVT)</h2>
                    <p>保证动力传送顺畅的关键</p>
                    <p>
                      致力于从根本上消除换档的顿挫感，使动力传输更平滑顺畅，从而提供全方位的驾乘乐趣与舒适体验，在任何驾驶状况下都能确保适当的工作效率，确保车主在享受驾驶乐趣的同时获得更优的燃油效率。
                    </p>
                  </div>
                </el-carousel-item>
                <el-carousel-item>
                  <div>
                    <img
                      src="@/assets/images/dianqi/dianqi_100001902.jpg"
                      alt=""
                    />
                  </div>
                  <div class="txt">
                    <p>
                      此雷克萨斯智·混动部件仅供参考，具体部件样式请以实车为准。
                    </p>
                    <h2>阿特金森发动机</h2>
                    <p>雷克萨斯智·混动的能量心脏</p>
                    <p>
                      与雷克萨斯智·混动车型强劲的电动机高效合作，强化低转速时的扭矩。相比奥托循环发动机，显菩地降低油耗、减少废气排放，极大提升了车辆的燃油经济性，为消费者带来高效环保的驾乘体验。
                    </p>
                  </div>
                </el-carousel-item>
              </el-carousel>
            </div>
          </div>
        </div>
      </div>
      <div class="yuanli">
        <div class="title"><h3>多级全混动系统</h3></div>
        <div class="car-pic">
          <img src="@/assets/images/dianqi/dianqi_100001921.jpg" alt="" />
          <div
            class="cir1"
            @click="
              xitongindex = 1;
              maskisshow2 = true;
            "
          >
            <span :class="xitongindex == 1 ? 'active' : ''"></span>
          </div>
          <div
            class="cir2"
            @click="
              xitongindex = 2;
              maskisshow2 = true;
            "
          >
            <span :class="xitongindex == 2 ? 'active' : ''"></span>
          </div>
          <div
            class="cir3"
            @click="
              xitongindex = 3;
              maskisshow2 = true;
            "
          >
            <span :class="xitongindex == 3 ? 'active' : ''"></span>
          </div>
          <div class="mask" v-if="maskisshow2">
            <div class="btn1">
              <button @click="maskisshow2 = false">x</button>
            </div>
            <div class="banner3">
              <el-carousel
                :autoplay="false"
                arrow="always"
                height="590px"
                :initial-index="xitongindex - 1"
              >
                <el-carousel-item>
                  <div>
                    <img
                      src="@/assets/images/dianqi/dianqi_100001906.jpg"
                      alt=""
                    />
                  </div>
                  <div class="txt">
                    <p>
                      此雷克萨斯智·混动部件仅供参考，具体部件样式请以实车为准。
                    </p>
                    <h2>镍氢电池组</h2>
                    <p>理电池无法企及的高效与环保</p>
                    <p>
                      可在零下40°C至零上80°C的极端温度下正常工作，具有瞬间功率输出大，电流更大的优势，电池组本身能够被回收利用，更加绿色环保。
                    </p>
                  </div>
                </el-carousel-item>
                <el-carousel-item>
                  <div>
                    <img
                      src="@/assets/images/dianqi/dianqi_100001907.jpg"
                      alt=""
                    />
                  </div>
                  <div class="txt">
                    <p>
                      此雷克萨斯智·混动部件仅供参考，具体部件样式请以实车为准。
                    </p>
                    <h2>能量控制单元 (PCU)</h2>
                    <p>雷克萨斯智·混动独有的智能大脑</p>
                    <p>
                      高效智能控制着发电机的直交流电转换，确保雷克萨斯全混动科技系统稳定运行，实时计算着极具效率的两种动力的结合方式，有效地提高车辆燃油经济性。
                    </p>
                  </div>
                </el-carousel-item>
                <el-carousel-item>
                  <div>
                    <img
                      src="@/assets/images/dianqi/dianqi_100001908.jpg"
                      alt=""
                    />
                  </div>
                  <div class="txt">
                    <p>
                      此雷克萨斯智·混动部件仅供参考，具体部件样式请以实车为准。
                    </p>
                    <h2>电子无级变速系统（ECVT)</h2>
                    <p>保证动力传送顺畅的关键</p>
                    <p>
                      致力于从根本上消除换档的顿挫感，使动力传输更平滑顺畅，从而提供全方位的驾乘乐趣与舒适体验，在任何驾驶状况下都能确保适当的工作效率，确保车主在享受驾驶乐趣的同时获得更优的燃油效率。
                    </p>
                  </div>
                </el-carousel-item>
              </el-carousel>
            </div>
          </div>
        </div>
        <div class="txt1">
          <p>
            多级全混动系统仅限LS 500h、LC 500h车型配备。LC
            500h车型口到100公里/小时加速可达5秒。
          </p>
        </div>
      </div>
      <div class="chexing">
        <div class="title"><h3>智·混动车型</h3></div>
        <ul>
          <li>
            <h4>ES</h4>
            <div>
              <img src="@/assets/images/home/home_100000002.png" alt="" />
            </div>
            <div><p>中大型豪华行政级轿车</p></div>
            <div class="mask">
              <div><a @click="$router.push({path:'/car',query:{id:1}})">车型详情 ></a></div>
              <div><a href="#">预约试驾 ></a></div>
            </div>
          </li>
          <li>
            <h4>LS</h4>
            <div>
              <img src="@/assets/images/home/home_100000003.png" alt="" />
            </div>
            <div><p>旗舰级豪华轿车</p></div>
            <div class="mask">
              <div><a @click="$router.push({path:'/car',query:{id:2}})">车型详情 ></a></div>
              <div><a href="#">预约试驾 ></a></div>
            </div>
          </li>
          <li>
            <h4>UX</h4>
            <div>
              <img src="@/assets/images/home/home_100000005.png" alt="" />
            </div>
            <div><p>豪华都市SUV</p></div>
            <div class="mask">
              <div><a @click="$router.push({path:'/car',query:{id:4}})">车型详情 ></a></div>
              <div><a href="#">预约试驾 ></a></div>
            </div>
          </li>
          <li>
            <h4>NX</h4>
            <div>
              <img src="@/assets/images/home/home_100000006.png" alt="" />
            </div>
            <div><p>中大型豪华SUV</p></div>
            <div class="mask">
              <div><a @click="$router.push({path:'/car',query:{id:5}})">车型详情 ></a></div>
              <div><a href="#">预约试驾 ></a></div>
            </div>
          </li>
          <li>
            <h4>RX</h4>
            <div>
              <img src="@/assets/images/home/home_100000007.png" alt="" />
            </div>
            <div><p>中大型豪华SUV</p></div>
            <div class="mask">
              <div><a @click="$router.push({path:'/car',query:{id:6}})">车型详情 ></a></div>
              <div><a href="#">预约试驾 ></a></div>
            </div>
          </li>
          <li>
            <h4>LC</h4>
            <div>
              <img src="@/assets/images/home/home_100000004.png" alt="" />
            </div>
            <div><p>旗舰级豪华GT轿跑</p></div>
            <div class="mask">
              <div><a @click="$router.push({path:'/car',query:{id:3}})">车型详情 ></a></div>
              <div><a href="#">预约试驾 ></a></div>
            </div>
          </li>
          <li>
            <h4>LM</h4>
            <div>
              <img src="@/assets/images/home/home_100000008.png" alt="" />
            </div>
            <div><p>旗舰级豪华MPV</p></div>
            <div class="mask">
              <div><a @click="$router.push({path:'/car',query:{id:7}})">车型详情 ></a></div>
              <div><a href="#">预约试驾 ></a></div>
            </div>
          </li>
        </ul>
      </div>
      <comp-footer></comp-footer>
    </div>
  </div>
</template>

<script>
import CompFooter from "@/components/comp-footer.vue";
export default {
  name: "DianQi",
  components: {
    CompFooter,
  },
  data() {
    return {
      isFixed: false,
      offsetTop: 0,
      zuchengindex: 1,
      xitongindex: 1,
      maskisshow: false,
      maskisshow2: false
    };
  },
  mounted() {
    window.addEventListener("scroll", this.initHeight);
    this.$nextTick(() => {
      this.offsetTop = document.querySelector("#boxFixed").offsetTop;
    });
  },
  methods: {
    initHeight() {
      var scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      this.isFixed = scrollTop > this.offsetTop ? true : false;
    },
  },
  destroyed() {
    window.removeEventListener("scroll", this.handleScroll);
  },
};
</script>

<style lang="scss" scoped>
.wrapper {
  position: relative;
  margin: 0 auto;
  width: 1901px;
}
.nav {
  width: 100%;
  height: 60px;
  position: absolute;
  top: 0;
  left: 0;
  transition: all 0.8s;
  z-index: 6666;
  ul {
    width: 1140px;
    transform: translateX(380px);
    display: flex;
    justify-content: flex-end;
    li {
      height: 60px;
      padding: 0 10px;
      line-height: 60px;
      a {
        color: #fff;
        font-size: 14px;
      }
    }
  }
}
.banner {
  width: 1901px;
  height: 978px;
  margin: 0 auto;
  img {
    cursor: pointer;
  }
}
.banner1 {
  width: 1901px;
  height: 978px;
  margin: 40px auto;
  img {
    cursor: pointer;
  }
}
.title {
  margin-bottom: 60px;
  h3 {
    font-size: 25px;
    color: #636363;
    font-weight: normal;
    text-align: center;
  }
}
.is_fixed {
  position: fixed;
  top: 0;
}
.zucheng {
  width: 1140px;
  margin: 0 auto;
  .text-content {
    font-size: 14px;
    line-height: 25px;
    ul {
      li {
        margin-top: 15px;
      }
    }
  }
  .car-pic {
    width: 1140px;
    margin-top: 60px;
    text-align: center;
    position: relative;
    img {
      width: 800px;
    }
    .cir1,
    .cir2,
    .cir3,
    .cir4 {
      cursor: pointer;
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background-color: rgba(0, 0, 0, 0.4);
      border: 1px solid #fff;
      position: absolute;
      left: 400px;
      top: 140px;
      animation-name: scal;
      animation-duration: 4s;
      animation-timing-function: ease;
      animation-iteration-count: infinite;
      span {
        display: block;
        width: 18px;
        height: 18px;
        margin-left: 19px;
        margin-top: 19px;
        border-radius: 50%;
        background-color: #000;
        border: 2px solid #fff;
      }
      span.active {
        background-color: #177bdf;
      }
    }
    .cir2 {
      animation-delay: 2s;
      left: 470px;
      top: 170px;
    }
    .cir3 {
      animation-delay: 3s;
      left: 535px;
      top: 210px;
    }
    .cir4 {
      animation-delay: 4s;
      left: 700px;
      top: 160px;
    }
    .mask {
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.9);
      position: fixed;
      top: 0;
      left: 0;
      z-index: 9000;
      .banner2 {
        width: 760px;
        height: 400px;
        margin: 0 auto;
        .txt {
          text-align: left;
          box-sizing: border-box;
          padding: 10px 40px;
          background-color: #fff;
          p {
            font-size: 13px;
            margin: 10px 0;
          }
        }
      }
      .btn1 {
        position: absolute;
        right: 30px;
        top: 30px;
        border-radius: 50%;
        button {
          font-size: 60px;
          width: 60px;
          height: 60px;
          border-radius: 50%;
          background-color: transparent;
          color: #ccc;
          cursor: pointer;
        }
      }
    }
  }
}
.yuanli {
  width: 1140px;
  margin: 120px auto 0;
  position: relative;
  .car-pic {
    width: 1140px;
    margin-top: 60px;
    text-align: center;
    position: relative;
    img {
      width: 800px;
    }
    .cir1,
    .cir2,
    .cir3,
    .cir4 {
      cursor: pointer;
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background-color: rgba(0, 0, 0, 0.4);
      border: 1px solid #fff;
      position: absolute;
      left: 340px;
      top: 120px;
      animation-name: scal;
      animation-duration: 4s;
      animation-timing-function: ease;
      animation-iteration-count: infinite;
      span {
        display: block;
        width: 18px;
        height: 18px;
        margin-left: 19px;
        margin-top: 19px;
        border-radius: 50%;
        background-color: #000;
        border: 2px solid #fff;
      }
      span.active {
        background-color: #177bdf;
      }
    }
    .cir2 {
      animation-delay: 2s;
      left: 510px;
      top: 200px;
    }
    .cir3 {
      animation-delay: 3s;
      left: 735px;
      top: 70px;
    }
    .mask {
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.9);
      position: fixed;
      top: 0;
      left: 0;
      z-index: 9000;
      .banner3 {
        width: 760px;
        height: 400px;
        margin: 0 auto;
        .txt {
          text-align: left;
          box-sizing: border-box;
          padding: 10px 40px;
          background-color: #fff;
          p {
            font-size: 13px;
            margin: 10px 0;
          }
        }
      }
      .btn1 {
        position: absolute;
        right: 30px;
        top: 30px;
        border-radius: 50%;
        button {
          font-size: 60px;
          width: 60px;
          height: 60px;
          border-radius: 50%;
          background-color: transparent;
          color: #ccc;
          cursor: pointer;
        }
      }
    }
  }
  .txt1 {
    p {
      position: absolute;
      right: 20px;
      bottom: 20px;
      line-height: 25px;
      font-size: 13px;
      color: #636363;
      width: 300px;
    }
  }
}
.chexing {
  margin: 60px auto;
  ul {
    width: 1140px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    
    li {
        margin-bottom: 20px;
        margin-right: 15px;
      position: relative;
      width: 270px;
      height: 213px;
      box-shadow: 0 0 5px #ccc;
      text-align: center;
      h4 {
        padding-top: 30px;
      }
      img {
        width: 250px;
      }
      p {
        font-size: 14px;
        color: #636363;
        margin-top: 20px;
      }
      .mask {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        width: 270px;
        height: 213px;
        line-height: 60px;
        padding: 40px 0;
        background-color: rgba(255, 255, 255, 0.9);
        box-sizing: border-box;
        a:hover{
            color: #636363;
        }
      }
    }
    li:hover .mask{
        display: block;
    }
  }
}
@keyframes scal {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(0.7);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
a{
  cursor: pointer;
}
</style>